<template>
    <div>
      <el-menu :collapse="homedata.isCollapse" @select="selectNode" :style="{width:homedata.leftwidth+'px'}">
        <el-submenu v-for="menu in menus" index="menu.id+''">
          <template slot="title">
            <i :class="['iconfont',menu.icon]"></i>
            <span slot="title">{{menu.name}}</span>
          </template>

          <el-menu-item v-for="m in menu.children" index="m.id+''" @click="selectNode(m.url)">
            <template slot="title">
              <i :class="['iconfont',m.icon]"></i>
              <span slot="title">{{m.name}}</span>
            </template>
          </el-menu-item>
        </el-submenu>
      </el-menu>
    </div>

</template>

<script>
  import axios from "axios"
    export default {
      props:["homedata"],
        data(){
          return{
            isCollapse:false,
            menus:[]
          }
        },
      mounted(){
          var that = this;
        axios.get("/sys/menu/getMenu").then(function (response) {
          that.menus = response.data;
          console.log(that.menus)
        })
      },
      methods:{
        selectNode(url){
          this.$router.push(url)
        }
      }
    }
</script>

<style scoped>

</style>
